<template>
  <div class="goodlist">
    <van-search placeholder="请输入搜索关键词"></van-search>
    <van-grid class="sortBox">
      <van-grid-item :text="$route.query.title" />
      <van-grid-item
        :text="condition.priceOrder == 'desc' ? '价格降序' : '价格升序'"
        @click="changePrice"
      />
      <van-grid-item
        :text="condition.salesOrder == 'desc' ? '销量降序' : '销量升序'"
        @click="changeSales"
      />
      <van-grid-item text="新品" />
    </van-grid>
    <div class="goodList" v-if="productList.length > 0">
      <van-grid class="goodColumn" column-num="2" gutter="8">
        <van-grid-item class="good" v-for="item in productList" :key="item.id">
          <router-link :to="`/detail/${item.id}`">
            <van-image class="good_pic" :src="item.image"></van-image>
            <div class="good_info">
              <div class="good_name">{{ item.store_name }}</div>
              <div class="good_price">¥{{ item.price }}</div>
              <div class="good_last">
                <div class="good_vip" v-show="item.vip_price">
                  ¥{{ item.vip_price
                  }}<van-image
                    src=""
                    alt=""
                  />
                </div>
                <div class="good_sales">已售{{ item.sales }}件</div>
              </div>
            </div>
          </router-link>
        </van-grid-item>
      </van-grid>
    </div>
    <NoGood v-else></NoGood>
  </div>
</template>

<script>
import NoGood from "../components/NoGood.vue"
export default {
  name: "GoodList",
  data() {
    return {
      productList: [],
      condition: {
        page: 1,
        limit: 10,
        keyword: "",
        sid: 0,
        news: 0,
        priceOrder: "",
        salesOrder: "",
        searchWord: ''
      },
    };
  },
  props: {
    id:{
      type: String,
      default: '0'
    },
  },
  created() {
    
    // console.log(this.searchWord)
    if(this.id == ':id'){
      this.condition.sid = 0;
    }else{
      this.condition.sid = this.id;
    }
    if(this.$route.query.searchWord){
      this.condition.keyword = this.$route.query.searchWord;
    }
    this.axios
      .get("/api/products", {
        params: this.condition,
      })
      .then((d) => {
        if (d.data.status == 200) {
          this.productList = d.data.data;
          // console.log("this.productList==>", this.productList);
        }
      });
    
  },
  methods: {
    changePrice() {
      this.condition.salesOrder = ''
      if (this.condition.priceOrder == "desc") {
        this.condition.priceOrder = "asc";
      } else {
        this.condition.priceOrder = "desc";
      }
      this.getProduct();
    },
    changeSales() {
      this.condition.priceOrder = ''
      if (this.condition.salesOrder == "desc") {
        this.condition.salesOrder = "asc";
      } else {
        this.condition.salesOrder = "desc";
      }
      this.getProduct();
    },
    getProduct() {
      this.condition.sid = this.id;
      console.log(this.condition)
      this.$axios
        .get("/api/products", {
          params: this.condition,
        })
        .then((d) => {
          if (d.data.status == 200) {
            this.productList = d.data.data;
          }
          // console.log(d)
        });
    },
  },
  components: {
    NoGood
  }
};
</script>

<style lang="less">
a {
  color: black;
}
.container {
  padding: 0px 1rem;
}
.goodlist {
  background-color: #efefef;
  height: 100vh;
  .van-search {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 999;
    background-color: #fc4141;
    .van-search__content {
      border-radius: 30px;
      background-color: #f5f5f5;
    }
  }
  .sortBox {
    padding-top: 54px;
    position: fixed;
    width: 100%;
    z-index: 999;
    .van-grid-item {
      .van-grid-item__content {
        padding: 11px 8px;
        .van-grid-item__text {
          font-size: 0.9rem;
        }
      }
      &:nth-child(1) {
        .van-grid-item__text {
          color: #fc4141;
        }
      }
    }
  }
  .goodList {
    background-color: #efefef;
    width: 100vw;
    .goodColumn {
      padding: 105px 0px;
      .good {
        width: 30rem;
        // &:nth-child(1){
        //   margin-top: 8px;
        // }
        // &:nth-child(2){
        //   margin-top: 8px;
        // }
        .van-grid-item__content {
          padding: 5px 0px 8px;
          .good_pic {
            img {
            }
          }
          .good_info {
            padding: 0px 8px;
            line-height: 25px;
            margin-top: 15px;
            width: 90%;
            .good_name {
              font-size: 1rem;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            .good_price {
              font-size: 1.1rem;
              color: #fc4141;
              letter-spacing: 1px;
            }
            .good_last {
              display: flex;
              align-items: center;
              .good_vip {
                font-size: 0.7rem;
                letter-spacing: 0.5px;
                flex: 1;
                .van-image {
                  width: 30%;
                }
              }
              .good_sales {
                flex: 1;
                font-size: 0.8rem;
                color: #919191;
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
  // .emptyList {
  //   padding-top: 7rem;
  //   padding-bottom: 2rem;
  //   background: white;
  //   & > img {
  //     width: 13rem;
  //     display: block;
  //     margin: 0 auto;
  //     border-bottom: 1px solid #b2b2b2;
  //     padding-bottom: 3.5rem;
  //   }
  //   .empty_rec {
  //     text-align: center;
  //     background-color: white;
  //     width: 6rem;
  //     margin: -0.7rem auto;
  //     border-left: 1px solid #b2b2b2;
  //     border-right: 1px solid #b2b2b2;
  //     font-size: 0.9rem;
  //   }
  //   .recolist {
  //     margin-top: 2rem;
  //     padding-bottom: 1.5rem;
  //     .recoitem {
  //       .reco_img {
  //         // width: 100%;
  //         // height: 9rem;
  //         .van-image {
  //           img {
  //             // width: 100%;
  //             height: 10rem;
  //           }
  //         }
  //       }

  //       .reco_name {
  //         display: -webkit-box;
  //         -webkit-line-clamp: 1;
  //         text-overflow: ellipsis;
  //         overflow: hidden;
  //         -webkit-box-orient: vertical;
  //         margin-top: 0.3rem;
  //         width: 9rem;
  //       }
  //       .reco_price {
  //         color: #fc4141;
  //         margin-top: 0.15rem;
  //       }
  //     }
  //     .van-grid-item__content {
  //       padding: 0.3rem 0rem;
  //     }
  //   }
  // }
}
</style>